(function( $ ){
    // 当domReady的时候开始初始化
    $(function() {

        var $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,
            $uploadBtn = $('#uploadBtn'),
            // Web Uploader实例
            uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: false,

            // swf文件路径
            swf: '../webupload/dist/Uploader.swf',

            // 文件接收服务端。
            server: '/',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            threads:1,
            //可重复上传
            duplicate :false,
            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            file.setStatus('queued');
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img'),
                $btns = $('<div class="file-panel">' +
                    '<span class="cancel">删除</span>' +
                    '<span class="rotateRight">向右旋转</span>' +
                    '</div>').appendTo( $li );



            // 创建缩略图
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
                debugger;
            }, thumbnailWidth, thumbnailHeight );

            $li.on( 'mouseenter', function(e) {
                $btns.stop().animate({height: 30});
            });

            $li.on( 'mouseleave', function(e) {
                $btns.stop().animate({height: 0});
            });

            $btns.on( 'click', 'span', function() {

                var index = $(this).index();

                switch ( index ) {
                    case 0:
                        uploader.removeFile( file , true);
                        return;
                    case 1:
                        showOverlay();
                        showImg(file);
                        break;
                }
            });

            $list.append( $li );
        });

        // 当文件被移除队列后触发
        uploader.onFileDequeued = function( file ) {
            removeFile( file );
        };

        uploader.onUploadSuccess = function(file,response ){
            var $info = $('#'+file.id+' .info');
            $info.html('');
            if(response.result){
                $info.html('<span class="uploadSuccess">上传成功</span>');
            } else {
                $info.html('<span class="uploadFail">上传失败</span>');

            }
            debugger;
        };

        uploader.onError = function(code){

            if('F_DUPLICATE' == code){
                alert('文件已添加');
            } else {
                alert('错误'+code);
            }
        };

        $uploadBtn.on('click',function (e) {
            uploader.upload();
        });

        // 负责view的销毁
        function removeFile( file ) {
            var $li = $('#'+file.id);

            $li.off().find('.file-panel').off().end().remove();
        }

        //图片浏览
        function showImg( file ) {

            $("#base64_output").html('');
            var r = new FileReader();  //本地预览
            debugger;
            var fileHeight = file._info.height*0.5;
            var fileWidth = file._info.width*0.5;
            var windowHeight = $(document).height();
            var windowWidth = $(document).width();

            var minusHeight = fileHeight - windowHeight;
            var minusWidth = fileWidth - windowWidth;

            var leftPx = Math.abs(minusWidth)/2;
            var topPx = Math.abs(minusHeight)/2;

            $("#base64_output").css({'height':fileHeight,'width':fileWidth,'top':topPx,'left':leftPx});
            r.onload = function (e) {
                $("#base64_output").append("<img data-name='" + file.name + "' src='" + e.target.result + "' style=' width:100%;height: 100%; position: relative;'/>");
            };
            r.readAsDataURL(file.source.source);
        }

        /**
         * 显示遮罩层
         */
        function showOverlay() {
            // 遮罩层宽高分别为页面内容的宽高
            $('.overlay').css({'height':$(document).height(),'width':$(document).width()});
            $('.overlay').show();
            $('.overlay').on('click',function () {
                closeOverlay();
            })
        };
        /**
         * 关闭遮罩层
         */
        function closeOverlay() {
            $('.overlay').hide();
            $("#base64_output").html('');
        };
    });


})( jQuery );